<!-- 收入合同 -->
<template>
    <div class="page_container">
        <div class="page_container_scroll">
            <a-card :bordered="false" class="mb-2">
                <a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form">
                    <a-row :gutter="24">
                        <a-col :span="6"> <a-form-item label="合同编码" name="code">
                                <a-input v-model:value="queryForm.code" />
                            </a-form-item>
                        </a-col> <a-col :span="6"> <a-form-item label="合同名称" name="contractName">
                                <a-input v-model:value="queryForm.contractName" />
                            </a-form-item>
                        </a-col> <a-col :span="6"> <a-form-item label="项目名称" name="projectName">
                                <a-input v-model:value="queryForm.projectName" />
                            </a-form-item>
                        </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="合同类型" name="contractType">
                                <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="queryForm.contractType" placeholder="请选择"
                                    :options="contractType">
                                    <a-select-option value="all">全部</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="业主名称" name="ownerName">
                                <a-input v-model:value="queryForm.ownerName" />
                            </a-form-item>
                        </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="负责人" name="director">
                                <a-input v-model:value="queryForm.director" />
                            </a-form-item>
                        </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="所属部门" name="orgName">
                                <a-input v-model:value="queryForm.orgName" />
                            </a-form-item>
                        </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="合同金额">
                                <a-row>
                                    <a-col :span="12">
                                        <a-input-number name="contractAmountStart"
                                            v-model:value="queryForm.contractAmountStart" min="0" style="width: 100%;"
                                            placeholder="起始金额" />
                                    </a-col>
                                    <a-col :span="12">
                                        <a-input-number name="contractAmountEnd"
                                            v-model:value="queryForm.contractAmountEnd" min="0" style="width: 100%;"
                                            placeholder="结束金额" />
                                    </a-col>
                                </a-row>
                            </a-form-item>
                        </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="未付金额">
                                <a-row> <a-col :span="12">
                                        <a-input-number name="unpaidAmountStart"
                                            v-model:value="queryForm.unpaidAmountStart" min="0" style="width: 100%;"
                                            placeholder="起始金额" /></a-col> <a-col :span="12">
                                        <a-input-number name="unpaidAmountEnd" v-model:value="queryForm.unpaidAmountEnd"
                                            min="0" style="width: 100%;" placeholder="结束金额" /></a-col>
                                </a-row>
                            </a-form-item>
                        </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="签订日期" name="signingDate">
                                <a-row>

                                    <a-range-picker v-model:value="queryForm.signingDate" />
                                </a-row>

                            </a-form-item>
                        </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="审核状态" name="auditStatus">
                                <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="queryForm.auditStatus" placeholder="请选择"
                                    :options="auditStatusOptions">
                                </a-select>
                            </a-form-item> </a-col>
                        <a-col :span="6">
                            <a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
                            <a-button style="margin: 0 8px" @click="reset">重置</a-button>
                            <a @click="toggleAdvanced" style="margin-left: 8px">
                                {{ advanced ? '收起' : '展开' }}
                                <component :is="advanced ? 'up-outlined' : 'down-outlined'" />
                            </a>
                        </a-col>
                        <!-- <a-col :span="2" class="text-left">
                        <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="queryForm.role" style="width: 120px" :options="roles"
                            :fieldNames="{ label: 'label', value: 'value' }" placeholder="本人">
                        </a-select>

                    </a-col>

                    <a-col :span="22" class="text-right">
                        <a-button type="primary" class="mr-2" @click="showFliter = true">过滤条件</a-button>

                    </a-col> -->
                    </a-row>
                </a-form> </a-card>
            <a-card :bordered="false" class="mb-2">
                <s-table ref="tableRef" :data="loadData" bordered :row-key="(record) => record.id"
                    :tool-config="toolConfig" :columns="columns" class="mb-2" :scroll="{ x: 900, }">


                    <template #operator class="table-operator">
                        <div style="display: flex; justify-content: space-between">
                            <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="queryForm.role" style="width: 120px" :options="roles"
                                :fieldNames="{ label: 'label', value: 'value' }" placeholder="本人">
                            </a-select>
                            <!-- <a-space>
                            <a-button type="primary" @click="showEdit()">
                                <template #icon>
                                    <plus-outlined />
                                </template>
<span>新增</span>
</a-button>
</a-space> -->
                        </div>
                    </template>
                    <template #bodyCell="{ column, record, index }">
                        <template v-if="column.key === 'index'">
                            {{ index + 1 }}
                        </template>
                        <template v-if="column.key === 'type'">
                            {{ record.type == "1" ? "销售合同" : "施工合同" }}
                        </template>
                        <template v-if="column.key === 'stateText'">
                            <stateTag :value="record.stateText" />
                        </template>
                        <template v-if="column.key === 'control'">
                            <div>
                                <a @click="showInfo(record)">查看</a>
                                <!-- <a @click="showEdit(record)">编辑</a>
                            <a-divider type="vertical" />
                            <a-popconfirm title="确定删除此数据源？" @confirm="remove(record)">
                                <a-button type="link" danger size="small">删除</a-button>
                            </a-popconfirm> -->
                            </div>
                        </template>
                    </template>
                </s-table>
            </a-card>

            <info :id="contractId" ref="contractInfo"></info>
        </div>
    </div>
</template>

<script setup name="receivableMeetSale">
import { roles, auditStatusOptions, contractType } from '@/utils/constants.js'
import api from '@/api/contract/revenueContract/index'
import info from './components/revenueContract/info.vue'
import stateTag from '@/components/Task/stateTag.vue'
const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
const tableRef = ref()
const editRef = ref()
const isEdit = ref(false)
const showFliter = ref(false)
const showAddContract = ref(false)
const contractId = ref("")
const queryForm = ref({})
// 查询区域显示更多控制
const advanced = ref(false)
const toggleAdvanced = () => {
    advanced.value = !advanced.value
}
const contractInfo = ref()
const showInfo = (record) => {
    contractId.value = record.id
    console.log(record)
    contractInfo.value.show(record)
}

const reset = () => {
    queryForm.value = {}
}

const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 50, align: 'center'
    },
    {
        title: '合同编号',
        dataIndex: 'code',
        key: 'code',
        width: 150,
        align: 'center'
    },
    {
        title: '合同名称',
        dataIndex: 'name',
        key: 'name',
        width: 180,
        align: 'center'
    },
    {
        title: '甲方名称',
        dataIndex: 'partyA',
        key: 'partyA',
        width: 100,
        align: 'center'
    },
    {
        title: '审核状态',
        dataIndex: 'stateText',
        key: 'stateText',
        width: 100,
        align: 'center'
    },

    {
        title: "所属部门",
        dataIndex: "orgName",
        key: "orgName",
        width: 100,
        align: 'center'
    },
    {
        title: "合同金额（元）",
        dataIndex: "amount",
        key: "amount",
        width: 120,
        align: 'center'
    },
    {
        title: "签订时间",
        dataIndex: "createTime",
        Key: "createTime",
        width: 150,
        align: 'center'
    },
    {
        title: '操作',
        dataIndex: 'control',
        key: 'control',
        width: 120,
        align: 'center',
        fixed: "right"
    },
]


const remove = (record) => {
    console.log("remove id", record)
    api.delete([{ id: record.id }]).then((res) => {
        tableRef.value.refresh(true)
    })
}

const onQuery = () => {
    tableRef.value.refresh(true)
}
const submit = () => {
    editRef.value.submit()
}
const onClose = (refresh) => {
    showAddContract.value = false
    if (refresh) {
        tableRef.value.refresh(true)
    }
}

const loadData = (parameter) => {
    queryForm.value.current = parameter.current
    queryForm.value.size = parameter.size
    return api.page(queryForm.value).then((res) => {
        return res
    })

}

const showEdit = (record) => {

    showAddContract.value = true
    setTimeout(() => {
        editRef.value.show(record)
    }, 100);
    if (record) {
        isEdit.value = true
    } else {
        isEdit.value = false
    }
}
</script>
<style scoped></style>
